<template>
	<d2-container>
		<!-- 搜索 -->
		<template slot="header" class="query-area">
			<template>
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="门店自提订单" name="selfExtraction"></el-tab-pane>
					<el-tab-pane label="门店零售订单" name="shopOrder"></el-tab-pane>
					<el-tab-pane label="线下收款订单" name="selfService"></el-tab-pane>
					<el-tab-pane label="售后退款" name="refund"></el-tab-pane>
				</el-tabs>
			</template>

			<el-form v-if="activeName=='shopOrder' || activeName=='selfExtraction' || activeName=='selfService'" ref="queryForm" :model="queryForm" class="header-area" label-width="80px" style="height:auto">
				<el-row>
					<el-col :span="5">
						<el-form-item label="订单编号" prop="orderNo">
							<el-input type="text" v-model="queryForm.orderNo" placeholder="请输入订单编号"></el-input>
						</el-form-item>
					</el-col>
					<!-- <el-col :span="5">
						<el-form-item label="门店编号" prop="shopNo">
							<el-input type="text" v-model="queryForm.shopNo" placeholder="请输入门店编号"></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="5">
						<el-form-item label="会员账号" prop="userName">
							<el-input type="text" v-model="queryForm.userName" placeholder="请输入会员账号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="订单状态" prop="orderStatus">
							<el-select v-model="queryForm.orderStatus" placeholder="请选择" style="width: 100%;">
								<el-option label="全部" value=""></el-option>
								<!-- <el-option label="初始" value="0"></el-option> -->
								<el-option label="待付款" value="1"></el-option>
								<el-option label="已付款，待提货" value="2"></el-option>
								<el-option label="已完成" value="4"></el-option>
								<el-option label="已取消" value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="售后状态" prop="afterSaleStatus">
							<el-select v-model="queryForm.afterSaleStatus" placeholder="请选择" style="width: 100%;">
								<el-option label="全部" value=""></el-option>
								<el-option label="无售后" value="0"></el-option>
								<el-option label="部分退款中" value="1"></el-option>
								<el-option label="全部退款中" value="2"></el-option>
								<el-option label="已部分退款" value="3"></el-option>
								<el-option label="已全部退款" value="4"></el-option>
								<el-option label="已撤销退款" value="5"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="支付方式" prop="payType">
							<el-select v-model="queryForm.payType" placeholder="请选择" style="width: 100%;">
								<el-option label="全部" value=""></el-option>
								<el-option label="微信支付" value="7"></el-option>
								<el-option label="建行支付" value="8"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="4">
						<el-form-item label="销售渠道" prop="saleChannel">
							<el-select v-model="queryForm.saleChannel" placeholder="请选择" style="width: 100%;">
								<el-option label="全部" value=""></el-option>
								<el-option label="微信小程序" value="0"></el-option>
								<el-option label="商家/供应商" value="1"></el-option>
								<el-option label="直播平台" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="4">
						<el-form-item label="销售门店" prop="shopId">
							<el-select v-model="queryForm.shopId" filterable placeholder="请输入名字或选择" style="width: 100%;">
								<el-option label="不限" value=""></el-option>
								<el-option :label="item.shopName" :value="item.id" v-for="item of allShopList" :key="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="3">
						<el-form-item label="时间类型" prop="timeType">
							<el-select v-model="queryForm.timeType" placeholder="请选择" style="width: 100%;">
								<el-option label="全部" value=""></el-option>
								<el-option label="下单时间" value="1"></el-option>
								<el-option label="支付时间" value="2"></el-option>
								<el-option label="提货时间" value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="时间范围" prop="time" label-width="100px">
							<el-date-picker
								v-model="time"
								type="datetimerange"
								:picker-options="pickerOptions"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="timestamp"
								align="right"
								:default-time="['00:00:00', '23:59:59']"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm('queryForm')">查询</el-button>
							<el-button size="medium" @click="resetForm('queryForm')">重置</el-button>
							<el-button type="primary" plain size="medium" @click="exportForm('queryForm')">导出列表</el-button>
							<el-button type="primary" plain size="medium" @click="exportDetailForm('queryForm')">导出明细</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>

			<template v-if="activeName=='refund'">
				<div style="padding: 0 0 15px 0;">
					<el-button :class="{'chooseActive': !queryForm2.mainStatus}" type="primary" plain @click="chooseOrderStatus(0)">全部（{{refundStatistics.totalNum}}）</el-button>
					<el-button :class="{'chooseActive': queryForm2.mainStatus == '2'}" type="primary" plain @click="chooseOrderStatus(2)">已处理退款（{{refundStatistics.handedNum}}）</el-button>
					<el-button :class="{'chooseActive': queryForm2.mainStatus == '3'}" type="primary" plain @click="chooseOrderStatus(3)">已撤销退款（{{refundStatistics.revokeNum}}）</el-button>
					<el-button :class="{'chooseActive': queryForm2.mainStatus == '1'}" type="primary" plain @click="chooseOrderStatus(1)">处理中退款（{{refundStatistics.todoNum}}）</el-button>
				</div>

				<el-form ref="queryForm2" :model="queryForm2" class="header-area" label-width="90px" style="height:auto">
					<el-row>
						<el-col :span="4">
							<el-form-item label="退单编号" prop="refundNo">
								<el-input type="text" v-model="queryForm2.refundNo" placeholder="请输入退单编号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="订单编号" prop="orderNo">
								<el-input type="text" v-model="queryForm2.orderNo" placeholder="请输入订单编号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="小票编号" prop="ticketNo">
								<el-input type="text" v-model="queryForm2.ticketNo" placeholder="请输入小票编号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="会员账号" prop="userName">
								<el-input type="text" v-model="queryForm2.userName" placeholder="请输入会员账号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="售后类型" prop="afterSalesType">
								<el-select v-model="queryForm2.afterSalesType" placeholder="请选择" style="width: 100%;">
									<el-option label="全部" value=""></el-option>
									<el-option label="退款退货" value="1"></el-option>
									<el-option label="仅退款" value="2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="4">
							<el-form-item label="主状态" prop="mainStatus">
								<el-select v-model="queryForm2.mainStatus" placeholder="请选择" style="width: 100%;">
									<el-option label="全部" value=""></el-option>
									<el-option label="处理中" value="1"></el-option>
									<el-option label="已处理" value="2"></el-option>
									<el-option label="已撤销" value="3"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="退款状态" prop="refundStatus">
								<el-select v-model="queryForm2.refundStatus" placeholder="请选择" style="width: 100%;">
									<el-option label="全部" value=""></el-option>
									<el-option label="退款中" value="1"></el-option>
									<el-option label="已退款" value="2"></el-option>
									<el-option label="已撤销" value="3"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="退货入库状态" prop="returnStockInStatus">
								<el-select v-model="queryForm2.returnStockInStatus" placeholder="请选择"
									style="width: 100%;">
									<el-option label="全部" value=""></el-option>
									<el-option label="无" value="0"></el-option>
									<el-option label="入库中" value="1"></el-option>
									<el-option label="已入库" value="2"></el-option>
									<el-option label="已撤销" value="3"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="申请时间" prop="time2">
								<el-date-picker
									v-model="time2"
									type="datetimerange"
									:picker-options="pickerOptions"
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="timestamp"
									align="right"
									:default-time="['00:00:00', '23:59:59']"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<div class="search-submit">
								<el-button type="primary" size="medium" @click="submitForm('queryForm2')">查询</el-button>
								<el-button size="medium" @click="resetForm('queryForm2')">重置</el-button>
								<el-button size="medium" @click="exportForm('queryForm2')">导出</el-button>
							</div>
						</el-col>
					</el-row>
				</el-form>
			</template>
		</template>

		<!-- 门店零售订单 -->
		<div v-show="activeName=='shopOrder'">
			<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border>
				<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
				
				<el-table-column prop="orderNo" label="订单编号" width="200"></el-table-column>
				<el-table-column prop="shopNo" label="门店编号" width="80"></el-table-column>
				<el-table-column prop="saleChannel" label="销售渠道" width="110" align="center">
					<template slot-scope="scope">
						<el-tag size="mini" v-if="scope.row.saleChannel == 2">直播平台</el-tag>
						<el-tag size="mini" type="warning" v-else-if="scope.row.saleChannel == 1">商家/供应商</el-tag>
						<el-tag size="mini" type="success" v-else>微信小程序</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="cashierName" label="收银员" width="80"></el-table-column>
				
				<el-table-column prop="userPhone" label="会员账号" width="110"></el-table-column>
				
				<el-table-column prop="orderAmount" label="订单金额(元)" :formatter="forMoney" width="120" align="center"></el-table-column>
				<el-table-column prop="couponAmount" label="消费券金额" :formatter="forMoney" width="100" align="center"></el-table-column>
				
				<el-table-column align="center" prop="payType" label="支付方式" width="96">
					<template slot-scope="scope">
						<span v-if="scope.row.orderStatus == 1 || scope.row.orderStatus == 3">-</span>
						<el-tag v-else-if="scope.row.payType == 7">微信支付</el-tag>
						<el-tag type="success" v-else-if="scope.row.payType == 8">建行支付</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column align="center" prop="orderStatus" label="订单状态" width="164">
					<template slot-scope="scope">
						<el-tag type="danger" v-if="scope.row.orderStatus == 1">待付款</el-tag>
						<el-tag type="info" v-else-if="scope.row.afterSalesStatus == 4">订单已退款</el-tag>
						<el-tag type="warning" v-else-if="scope.row.orderStatus === 2 && scope.row.pickupStatus < 3">已付款，待提货</el-tag>
						<el-tag type="info" v-else-if="scope.row.orderStatus===2 && scope.row.afterSalesStatus == 4">交易关闭（售后退款）</el-tag>
						<el-tag type="info" v-else-if="scope.row.orderStatus == 3">订单已取消</el-tag>
						<el-tag type="success" v-else-if="scope.row.orderStatus == 4">已完成</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="afterSalesStatus" label="售后状态" width="110">
					<template slot-scope="scope">
						<span v-if="scope.row.afterSalesStatus == 0">无售后</span>
						<el-tag type="warning" v-else-if="scope.row.afterSalesStatus == 1">部分退款中</el-tag>
						<el-tag type="warning" v-else-if="scope.row.afterSalesStatus == 2">全部退款中</el-tag>
						<el-tag type="" v-else-if="scope.row.afterSalesStatus == 3">已部分退款</el-tag>
						<el-tag type="" v-else-if="scope.row.afterSalesStatus == 4">已全部退款</el-tag>
						<el-tag type="info" v-else-if="scope.row.afterSalesStatus == 5">已撤销</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column prop="createTime" label="下单时间" :formatter="forDate" width="96"></el-table-column>
				<el-table-column prop="payTime" label="支付时间" :formatter="forDate" width="96"></el-table-column>
				<el-table-column prop="ticketNo" label="小票编号">
					<template slot-scope="scope">
						<span v-if="scope.row.ticketNo">{{scope.row.ticketNo}}</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column prop="printTime" label="小票打印时间" :formatter="forDate" width="110"></el-table-column>
				<el-table-column fixed="right" label="操作" width="120">
					<template slot-scope="scope">
						<div>
							<el-button type="success" size="small" @click="openOrderDetail(scope.row)">查看详情</el-button>
						</div>

						<div style="margin-top: 5px;">
							<el-button type="warning" size="small" @click="applyAfterSale(scope.row)" v-if="scope.row.orderStatus==2 && scope.row.isRefundHandling == 0 && (scope.row.afterSalesStatus == 0 || scope.row.afterSalesStatus == 3 || scope.row.afterSalesStatus == 5)">申请退货</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		
		<!-- 门店自提订单 -->
		<div v-show="activeName=='selfExtraction' || activeName == 'selfService'">
			<el-table ref="orderTable" :data="sTableData" border style="width: 100%;margin-bottom: 20px;">
				<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
				
				<el-table-column prop="pickupName" label="所属门店" width="140"></el-table-column>
				<!-- <el-table-column prop="shopNo" label="门店编号" width="80"></el-table-column> -->
				<el-table-column prop="saleChannel" label="销售渠道" width="110" align="center">
					<template slot-scope="scope">
						<el-tag size="mini" v-if="scope.row.saleChannel == 2">直播平台</el-tag>
						<el-tag size="mini" type="warning" v-else-if="scope.row.saleChannel == 1">商家/供应商</el-tag>
						<el-tag size="mini" type="success" v-else>微信小程序</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="orderNo" label="订单编号" width="120"></el-table-column>
				<el-table-column prop="userPhone" label="会员账号" width="110"></el-table-column>
				
				<el-table-column prop="orderAmount" label="订单金额(元)" :formatter="forMoney" width="110" align="center"></el-table-column>
				<el-table-column prop="couponAmount" label="消费券金额" :formatter="forMoney" width="100" align="center"></el-table-column>
				
				<el-table-column prop="payType" label="支付方式" width="104" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.orderStatus == 1 || scope.row.orderStatus == 3">-</span>
						
						<el-tag type="success" size="mini" v-else-if="scope.row.payType == 7 && scope.row.isMemberPay">微信+消费券</el-tag>
						<el-tag type="success" size="mini" v-else-if="scope.row.payType == 7">微信支付</el-tag>
						
						<el-tag size="mini" v-else-if="scope.row.payType == 8 && scope.row.isMemberPay">建行+消费券</el-tag>
						<el-tag size="mini" v-else-if="scope.row.payType == 8">建行支付</el-tag>
						
						<el-tag type="warning" size="mini" v-else-if="scope.row.isAccountPay">账户余额</el-tag>
						<el-tag type="danger" size="mini" v-else-if="scope.row.isMemberPay">消费券支付</el-tag>
						<el-tag type="info" size="mini" v-else>其他</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column prop="orderStatus" label="订单状态" width="164" align="center">
					<template slot-scope="scope">
						<el-tag type="danger" size="mini" v-if="scope.row.orderStatus == 1">待付款</el-tag>
						<el-tag type="info" v-else-if="scope.row.afterSalesStatus == 4">订单已退款</el-tag>
						<el-tag type="warning" size="mini" v-else-if="scope.row.orderStatus === 2 && scope.row.pickupStatus < 3">已付款，待提货</el-tag>
						<el-tag type="info" size="mini" v-else-if="scope.row.orderStatus===2 && scope.row.afterSalesStatus == 4">交易关闭（售后退款）</el-tag>
						<el-tag type="info" size="mini" v-else-if="scope.row.orderStatus == 3">订单已取消</el-tag>
						<el-tag type="success" size="mini" v-else-if="scope.row.orderStatus == 4">已完成</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column prop="pickupNo" label="提货码" width="120"></el-table-column>
				<el-table-column prop="pickupStatus" label="提货状态" width="90" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.orderStatus == 1 || scope.row.orderStatus == 3">-</span>
						<el-tag type="info" v-else-if="scope.row.afterSalesStatus == 4">已退款</el-tag>
						<el-tag type="warning" size="mini" v-else-if="scope.row.pickupStatus == 1">备货中</el-tag>
						<el-tag type="warning" size="mini" v-else-if="scope.row.pickupStatus == 2">待提货</el-tag>
						<el-tag type="success" size="mini" v-else-if="scope.row.pickupStatus == 3">已提货</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="planPickupTime" label="预约提货时间" :formatter="forDate" width="116"></el-table-column>
				
				<el-table-column prop="afterSalesStatus" label="售后状态" align="center" width="100">
					<template slot-scope="scope">
						<span style="color: #ccc;" v-if="scope.row.afterSalesStatus == 0">无售后</span>
						<el-tag type="warning" size="mini" v-else-if="scope.row.afterSalesStatus == 1">部分退款中</el-tag>
						<el-tag type="warning" size="mini" v-else-if="scope.row.afterSalesStatus == 2">全部退款中</el-tag>
						<el-tag type="" size="mini" v-else-if="scope.row.afterSalesStatus == 3">已部分退款</el-tag>
						<el-tag type="" size="mini" v-else-if="scope.row.afterSalesStatus == 4">已全部退款</el-tag>
						<el-tag type="info" size="mini" v-else-if="scope.row.afterSalesStatus == 5">已撤销</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column prop="createTime" label="下单时间" :formatter="forDate" width="96"></el-table-column>
				<el-table-column prop="payTime" label="支付时间" :formatter="forDate" width="96"></el-table-column>
				<el-table-column prop="pickupTime" label="提货时间" :formatter="forDate" width="96"></el-table-column>
				
				<el-table-column fixed="right" label="操作" width="120">
					<template slot-scope="scope">
						<div>
							<el-button type="primary" size="small" @click="openOrderDetail(scope.row)">查看详情</el-button>
						</div>
						<!-- <div style="margin-top: 5px;" v-if="scope.row.payType == 8">
							<el-button type="warning" size="small" @click="applyAfterSale(scope.row)" v-if="scope.row.orderStatus==2 && scope.row.afterSalesStatus == 0">申请退货</el-button>
						</div> -->
						<div style="margin-top: 5px;">
							<el-button type="info" size="small" @click="queryAfterSale(scope.row)" v-if="scope.row.afterSalesStatus !== 0">查看售后</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		
		<!-- 售后退款 -->
		<div v-show="activeName=='refund'">
			<el-table :data="tableData2" style="width: 100%;margin-bottom: 20px;" row-key="id" border
				:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
				<el-table-column type="index" label="序号" width="50"></el-table-column>
				<el-table-column prop="refundNo" label="退单编号"></el-table-column>
				<el-table-column prop="createTime" label="申请时间" :formatter="forDate"></el-table-column>
				<el-table-column prop="orderNo" label="订单编号"></el-table-column>
				<el-table-column prop="ticketNo" label="小票编号"></el-table-column>
				<el-table-column prop="shopNo" label="门店编号"></el-table-column>
				<el-table-column align="center" prop="orderType" label="订单类型">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.orderType==1">零售订单</el-tag>
						<el-tag v-if="scope.row.orderType==2">商城自提</el-tag>
						<el-tag v-if="scope.row.orderType==3">商城物流</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="userName" label="会员账号"></el-table-column>
				<el-table-column prop="orderAmount" label="订单金额（元）"></el-table-column>
				<el-table-column prop="couponAmount" label="消费券金额（元）"></el-table-column>
				<el-table-column align="center" prop="payType" label="支付方式">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.payType==1">账户支付</el-tag>
						<el-tag v-if="scope.row.payType==2">现金支付</el-tag>
						<el-tag v-if="scope.row.payType==3">通联支付</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="refundAmount" label="退款金额（元）"></el-table-column>
				<el-table-column prop="refundCouponAmount" label="退消费券金额（元）"></el-table-column>
				<el-table-column align="center" prop="refundPath" label="退款路径">
					<template slot-scope="scope">
						{{scope.row.refundPath==0?"原路退回":""}}
						{{scope.row.refundPath==1?"线下退款":""}}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="afterSalesType" label="售后类型">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.afterSalesType==1">退款退货</el-tag>
						<el-tag v-if="scope.row.afterSalesType==2">仅退款</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="mainStatus" label="主状态">
					<template slot-scope="scope">
						{{scope.row.mainStatus==1?"待处理":""}}
						{{scope.row.mainStatus==2?"已处理":""}}
						{{scope.row.mainStatus==3?"已撤销":""}}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="refundStatus" label="退款状态">
					<template slot-scope="scope">
						{{scope.row.refundStatus==1?"退款中":""}}
						{{scope.row.refundStatus==2?"已退款":""}}
						{{scope.row.refundStatus==3?"已撤销":""}}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="returnStockInStatus" label="退款入库状态">
					<template slot-scope="scope">
						{{scope.row.returnStockInStatus==0?"无":""}}
						{{scope.row.returnStockInStatus==1?"入库中":""}}
						{{scope.row.returnStockInStatus==2?"已入库":""}}
						{{scope.row.returnStockInStatus==3?"已撤销":""}}
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="其他说明"></el-table-column>
				<el-table-column fixed="right" label="操作" width="120">
					<template slot-scope="scope">
						<div>
							<el-button type="primary" plain size="small"
								@click="queryAfterSale(scope.row.orderId,scope.row.id)">查看详情</el-button>
						</div>
						<div style="margin-top: 5px;">
							<el-button v-if="scope.row.mainStatus==1 && scope.row.refundStatus==1" type="warning" size="small" @click="queryAfterSale(scope.row.orderId,scope.row.id)">确认退款</el-button>
						</div>
						<div style="margin-top: 5px;">
							<el-button v-if="scope.row.mainStatus==1 && scope.row.refundStatus==1" type="danger" size="small" @click="queryAfterSale(scope.row.orderId,scope.row.id)">撤销</el-button>
						</div>
						<div style="margin-top: 5px;">
							<el-button type="primary" size="small" @click="queryAfterSale(scope.row.orderId,scope.row.id)" v-if="scope.row.mainStatus==1 && scope.row.refundStatus==2 && scope.row.returnStockInStatus==1">确认入库</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		
		<!-- 页脚部分 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-size="pageSize"
					:total="total"
					:page-sizes="[10, 20, 50, 100]"
					layout="total, sizes, prev, pager, next, jumper"
				></el-pagination>
			</div>
		</template>
		
		<!-- 弹窗 -->
		<template>
			<!-- 查看详情弹窗 -->
			<order-detail-dialog
				:isShow="showDetailDialog"
				:item="currentItem"
				@submit="fetchData"
				@close="closeOrderDetail"
			></order-detail-dialog>
			
			<!-- 建行退款弹窗 -->
			<order-refund-dialog
				:isShow="showRefundDialog"
				:item="currentItem"
				@submit="fetchData"
				@close="closeRefundDialog"
			></order-refund-dialog>
			
			<!-- 查看退款详情弹窗 -->
			<order-refund-detail-dialog
				:isShow="showRefundDetailDialog"
				:item="currentItem"
				@submit="fetchData"
				@close="closeRefundDetailDialog"
			></order-refund-detail-dialog>
		</template>
	</d2-container>
</template>

<script>
	import { getAllOrderInfoByPage, queryRefundStatistics, getOrderRefundByPage, exportAllOrderInfo, exportOrderRefundList, exportAllOrderDetail } from '@api/order/order'
	import { getShopList } from '@api/shop/shop'
	import orderDetailDialog from './components/order-detail-dialog'
	import orderRefundDialog from './components/order-refund-dialog'
	import orderRefundDetailDialog from './components/order-refund-detail-dialog'
	import dayjs from 'dayjs'
	export default {
		components: {
			orderDetailDialog,
			orderRefundDialog,
			orderRefundDetailDialog,
		},
		data() {
			return {
				activeName: 'selfExtraction',
				time: [],
				time2: [],
				queryForm: {
					orderNo: null,
					shopId: '',
					userName: null,
					orderType: 2,
					orderStatus: null,
					afterSaleStatus: null,
					timeType: '',
					timeBegin: null,
					timeEnd: null,
					ticketNo: null,
					payType: null,
					saleChannel: ''
				},
				queryForm2: {
					refundNo: null,
					orderNo: null,
					ticketNo: null,
					userName: null,
					afterSalesType: null,
					mainStatus: null,
					refundStatus: null,
					returnStockInStatus: null,
					timeBegin: null,
					timeEnd: null
				},
				tableData: [],
				sTableData: [],
				refundStatistics: {
					totalNum: 0,
					handedNum: 0,
					revokeNum: 0,
					todoNum: 0
				},
				tableData2: [],
				pickerOptions: {
					shortcuts: [{
							text: '最近一周',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近一个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
								picker.$emit('pick', [start, end])
							}
						},
						{
							text: '最近三个月',
							onClick(picker) {
								const end = new Date()
								const start = new Date()
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
								picker.$emit('pick', [start, end])
							}
						}
					]
				},
				currentPage: 1,
				pageSize: 10,
				total: 0,
				
				currentItem: {},
				showDetailDialog: false,
				showRefundDialog: false,
				showRefundDetailDialog: false,
				
				allShopList: []
			}
		},
		methods: {
			fetchData() {
				this.loading = true
			
				if (this.queryForm.timeType == '' && this.time[0] != null) {
					this.$message({
						message: '请选择时间类型',
						type: 'warning'
					});
					return;
				}
				if (this.queryForm.timeType != '' && this.time[0] == null) {
					this.$message({
						message: '请选择时间范围',
						type: 'warning'
					});
					return;
				}
			
				this.queryForm.timeBegin = this.time[0] == null ? null : dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss');
				this.queryForm.timeEnd = this.time[1] == null ? null : dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss');
				
				getAllOrderInfoByPage({
					orderType: this.queryForm.orderType,
					shopId: this.queryForm.shopId,
					orderNo: this.queryForm.orderNo,
					userName: this.queryForm.userName,
					orderStatus: this.queryForm.orderStatus,
					afterSaleStatus: this.queryForm.afterSaleStatus,
					timeType: this.queryForm.timeType,
					timeBegin: this.queryForm.timeBegin,
					timeEnd: this.queryForm.timeEnd,
					ticketNo: this.queryForm.ticketNo,
					payType: this.queryForm.payType,
					saleChannel: this.queryForm.saleChannel,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
					.then(res => {
						if (this.activeName === 'shopOrder') {
							this.tableData = res.data.content;
						}
						if (this.activeName === 'selfExtraction' || this.activeName == 'selfService') {
							this.sTableData = res.data.content;
						}
						this.total = res.data.total;
						this.loading = false;
					})
					.catch(err => {
						console.log('err', err);
						this.loading = false;
					})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.fetchData();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.fetchData();
			},
			resetPage() {
				this.currentPage = 1;
				this.pageSize = 10;
				this.total = 0;
			},
			
			forDate(row, column) {
				var formatTime = ''
				if (column.property == 'createTime') {
					formatTime = row.createTime == null ? '-' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if (column.property == 'payTime') {
					formatTime = row.payTime == null ? '-' : dayjs(row.payTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if (column.property == 'printTime') {
					formatTime = row.printTime == null ? '-' : dayjs(row.printTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if (column.property == 'planPickupTime') {
					formatTime = row.planPickupTime == null ? '-' : dayjs(row.planPickupTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if (column.property == 'pickupTime') {
					formatTime = row.pickupTime == null ? '-' : dayjs(row.pickupTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if (column.property == 'refundTime') {
					formatTime = row.refundTime == null ? '-' : dayjs(row.refundTime).format('YYYY-MM-DD HH:mm:ss');
				}
				return formatTime;
			},
			forMoney(row, column) {
				let money = '';
				if (column.property == 'orderAmount') {
					money = row.orderAmount == null ? '0.00' : row.orderAmount.toFixed(2);
				}
				if (column.property == 'couponAmount') {
					money = row.isMemberPay == 0 || row.couponAmount == null || row.couponAmount == 0 ? '-' : row.couponAmount + '元券';
				}
				return money;
			},
			
			handleClick(tab, event) {
				// console.log(tab.name);
				let tabName = tab.name;
				if (tabName == 'shopOrder') {
					this.queryForm.orderType = 1;
					this.sTableData = [];
					this.resetPage();
					this.fetchData();
				}
				if (tabName == 'selfExtraction') {
					this.queryForm.orderType = 2;
					this.tableData = [];
					this.resetPage();
					this.fetchData();
				}
				if (tabName == 'selfService') {
					this.queryForm.orderType = 5;
					this.tableData = [];
					this.resetPage();
					this.fetchData();
				}
				if (tabName == 'refund') {
					this.tableData2 = [];
					this.resetPage();
					this.QueryRefundStatistics();
					this.fetchData2();
				}
			},
			chooseOrderStatus(val) {
				if (val) {
					this.queryForm2.mainStatus = val.toString();
				} else {
					this.queryForm2.mainStatus = '';
				}
				// console.log(this.queryForm2.mainStatus);
				this.resetPage();
				this.fetchData2();
			},
			submitForm(formName) {
				if (formName == 'queryForm2') {
					this.resetPage();
					this.fetchData2();
				}
				if (formName == 'queryForm') {
					this.resetPage();
					this.fetchData();
				}
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.resetPage();
				if (formName == 'queryForm2') {
					this.time2 = [];
					this.fetchData2();
				}
				if (formName == 'queryForm') {
					this.time = [];
					this.fetchData();
				}
			},
			
			QueryRefundStatistics() {
				queryRefundStatistics()
					.then(res => {
						this.refundStatistics = res.data;
						this.loading = false;
					})
					.catch(err => {
						console.log('err', err);
						this.loading = false;
					})
			},
			
			fetchData2() {
				this.loading = true;
				this.queryForm2.timeBegin = this.time2[0] == null ? null : dayjs(this.time2[0]).format('YYYY-MM-DD HH:mm:ss');
				this.queryForm2.timeEnd = this.time2[1] == null ? null : dayjs(this.time2[1]).format('YYYY-MM-DD HH:mm:ss');
				// console.log(JSON.stringify(this.queryForm2))
				getOrderRefundByPage({
					refundNo: this.queryForm2.refundNo,
					orderNo: this.queryForm2.orderNo,
					userName: this.queryForm2.userName,
					ticketNo: this.queryForm2.ticketNo,
					afterSalesType: this.queryForm2.afterSalesType,
					mainStatus: this.queryForm2.mainStatus,
					refundStatus: this.queryForm2.refundStatus,
					returnStockInStatus: this.queryForm2.returnStockInStatus,
					timeBegin: this.queryForm2.timeBegin,
					timeEnd: this.queryForm2.timeEnd,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				})
					.then(res => {
						this.tableData2 = res.data.content;
						this.total = res.data.total;
						this.loading = false;
					})
					.catch(err => {
						console.log('err', err);
						this.loading = false;
					})
			},
			openOrderDetail(row) {
				sessionStorage.setItem('orderId', row.id);
				this.$router.push('/order/orderDetails');
			},
			
			// 列表操作
			openOrderDetail(row) { //查看详情
				// sessionStorage.setItem('orderId', row.id);
				// this.$router.push('/order/orderDetails');
				this.currentItem = row;
				this.showDetailDialog = true;
			},
			closeOrderDetail() {
				this.showDetailDialog = false;
			},
			
			applyAfterSale(row) { //退款
				// sessionStorage.setItem('orderIdApply', row.id);
				// this.$router.push('/order/orderApplyAfterSale');
				this.currentItem = row;
				this.showRefundDialog = true;
			},
			closeRefundDialog() {
				this.showRefundDialog = false;
			},
			
			queryAfterSale(row) { //查看退款详情
				// sessionStorage.setItem('orderIdQuery', orderId);
				// sessionStorage.setItem('refundId', refundId);
				// this.$router.push('/order/orderAfterSaleDetail');
				this.currentItem = row;
				this.showRefundDetailDialog = true;
			},
			closeRefundDetailDialog() {
				this.showRefundDetailDialog = false;
			},
			
			exportForm(formName) {
				if (formName == 'queryForm2') {
					this.ExportOrderRefundList();
				}
				if (formName == 'queryForm') {
					this.ExportOrderList();
				}
			},
			ExportOrderList() {
				if (this.queryForm.timeType == '' && this.time[0] != null) {
					this.$message({
						message: '请选择时间类型',
						type: 'warning'
					});
					return;
				}
				if (this.queryForm.timeType != '' && this.time[0] == null) {
					this.$message({
						message: '请选择时间范围',
						type: 'warning'
					});
					return;
				}

				this.queryForm.timeBegin = this.time[0] == null ? null : dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss');
				this.queryForm.timeEnd = this.time[1] == null ? null : dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss');
				
				exportAllOrderInfo({
					orderType: this.queryForm.orderType,
					shopId: this.queryForm.shopId,
					orderNo: this.queryForm.orderNo,
					userName: this.queryForm.userName,
					orderStatus: this.queryForm.orderStatus,
					afterSaleStatus: this.queryForm.afterSaleStatus,
					timeType: this.queryForm.timeType,
					timeBegin: this.queryForm.timeBegin,
					timeEnd: this.queryForm.timeEnd,
					ticketNo: this.queryForm.ticketNo,
					payType: this.queryForm.payType,
					saleChannel: this.queryForm.saleChannel,
				})
					.then(res => {
						var blob = new Blob([res.data], {
							type: 'application/vnd.ms-excel'
						});
						var filename = res.headers.filename;
						var downloadElement = document.createElement('a');
						var href = window.URL.createObjectURL(blob); // 创建下载的链接
						downloadElement.style.display = 'none';
						downloadElement.href = href;
						downloadElement.download = filename; // 下载后文件名
						document.body.appendChild(downloadElement);
						downloadElement.click(); // 点击下载
						document.body.removeChild(downloadElement); // 下载完成移除元素
						window.URL.revokeObjectURL(href); // 释放掉blob对象
						this.loading = false;
					})
					.catch(err => {
						console.log('err', err);
						this.loading = false;
					})
			},
			ExportOrderRefundList() {
				this.loading = true;
				this.queryForm2.timeBegin = this.time2[0] == null ? null : dayjs(this.time2[0]).format('YYYY-MM-DD HH:mm:ss');
				this.queryForm2.timeEnd = this.time2[1] == null ? null : dayjs(this.time2[1]).format('YYYY-MM-DD HH:mm:ss');
				// console.log(JSON.stringify(this.queryForm2))
				exportOrderRefundList({
					shopNo: this.queryForm2.shopNo,
					orderNo: this.queryForm2.orderNo,
					userName: this.queryForm2.userName,
					ticketNo: this.queryForm2.ticketNo,
					afterSalesType: this.queryForm2.afterSalesType,
					mainStatus: this.queryForm2.mainStatus,
					refundStatus: this.queryForm2.refundStatus,
					returnStockInStatus: this.queryForm2.returnStockInStatus,
					timeBegin: this.queryForm2.timeBegin,
					timeEnd: this.queryForm2.timeEnd
				})
					.then(res => {
						var blob = new Blob([res.data], {
							type: 'application/vnd.ms-excel'
						});
						var filename = res.headers.filename;
						var downloadElement = document.createElement('a');
						var href = window.URL.createObjectURL(blob); // 创建下载的链接
						downloadElement.style.display = 'none';
						downloadElement.href = href;
						downloadElement.download = filename; // 下载后文件名
						document.body.appendChild(downloadElement);
						downloadElement.click(); // 点击下载
						document.body.removeChild(downloadElement); // 下载完成移除元素
						window.URL.revokeObjectURL(href); // 释放掉blob对象
						this.loading = false;
					})
					.catch(err => {
						console.log('err', err);
						this.loading = false;
					})
			},
			
			exportDetailForm() {
				if (this.queryForm.timeType == '' && this.time[0] != null) {
					this.$message({
						message: '请选择时间类型',
						type: 'warning'
					});
					return;
				}
				if (this.queryForm.timeType != '' && this.time[0] == null) {
					this.$message({
						message: '请选择时间范围',
						type: 'warning'
					});
					return;
				}
				
				this.queryForm.timeBegin = this.time[0] == null ? null : dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss');
				this.queryForm.timeEnd = this.time[1] == null ? null : dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss');
				
				exportAllOrderDetail({
					orderType: this.queryForm.orderType,
					shopId: this.queryForm.shopId,
					orderNo: this.queryForm.orderNo,
					userName: this.queryForm.userName,
					orderStatus: this.queryForm.orderStatus,
					afterSaleStatus: this.queryForm.afterSaleStatus,
					timeType: this.queryForm.timeType,
					timeBegin: this.queryForm.timeBegin,
					timeEnd: this.queryForm.timeEnd,
					ticketNo: this.queryForm.ticketNo,
					payType: this.queryForm.payType,
					saleChannel: this.queryForm.saleChannel,
				})
					.then(res => {
						var blob = new Blob([res.data], {
							type: 'application/vnd.ms-excel'
						});
						var filename = res.headers.filename;
						var downloadElement = document.createElement('a');
						var href = window.URL.createObjectURL(blob); // 创建下载的链接
						downloadElement.style.display = 'none';
						downloadElement.href = href;
						downloadElement.download = filename; // 下载后文件名
						document.body.appendChild(downloadElement);
						downloadElement.click(); // 点击下载
						document.body.removeChild(downloadElement); // 下载完成移除元素
						window.URL.revokeObjectURL(href); // 释放掉blob对象
						this.loading = false;
					})
					.catch(err => {
						console.log('err', err);
						this.loading = false;
					})
			},
			
			getAllShopData() { //获取全部店铺列表
				getShopList({
					pageNum: 1,
					pageSize: 9999
				})
					.then(res => {
						this.allShopList = res.data.content;
					})
			}
		},
		mounted() {
			this.fetchData();
			this.getAllShopData();
		}
	}
</script>

<style lang="scss" scoped>
	// 样式请务必加scoped
	.chooseActive {
		background-color: #409EFF;
		border-color: #409EFF;
		color: #fff;
	}
</style>